<template>
    <view class="w100">
        <scroll-view scroll-x="true" class="scroll-view_H">
            <view class="pos-r bdso inlineBlock mar3 " v-for="tile, index in pics">
                <image mode="aspectFill" class="picCommonSize bc13" :src="tile"></image>
                <view class="pos-a w100 r0 l0 b0 flrc op8">
                    <view class="cu-btn cuIcon bg-black" @click="move(index,-1)">
                        <view class="fa fa-angle-left"></view>
                    </view>
                    <view class="cu-btn cuIcon bg-black" @click="move(index,1)">
                        <view class="fa fa-angle-right"></view>
                    </view>
                    <view class="cu-btn cuIcon bg-black" @click="del(index)">
                        <view class="fa fa-trash"></view>
                    </view>
                </view>
            </view>
        </scroll-view>
        <view class="">
            <view class="cu-btn bg-gradual-green" @click="selectPic()">选择图片</view>
        </view>
    </view>
</template>

<script>
    import picUp from "../../static/js/picUp";

    export default {
        name: "picsUp",
        props: {
            data: ''
        },
        data() {
            return {
                pics: []
            }
        },
        methods: {
            selectPic() {
                var _this = this;
                picUp.select(9).setCbFunc(function (pics) {
                    _this.pics = picUp.getViewData(pics)
                    _this.$emit("update:data", pics)
                })
            },
            del(index) {
                var _this = this;
                var pics = picUp.removePic(index)
                this.pics = picUp.getViewData(pics)
                _this.$emit("update:data", pics)
            },
            move(index, num) {
                var _this = this;
                var pics = picUp.picMove(index, num)
                this.pics = picUp.getViewData(pics)
                _this.$emit("update:data", pics)
            },
        },
        created() {
            picUp.setData(this.data)
        }
    }
</script>

<style>
    .picCommonSize {
        width: 40vw;
        height: 40vw;
    }
    .scroll-view_H {
        white-space: nowrap;
        width: 100%;
    }
</style>
